<!DOCTYPE html>
<html>
<head> 
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/jsp/head.jsp"%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/lib/bootstrap/css/bootstrap-responsive.css">
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-text.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-button.js"></script>
<script src="${pageContext.request.contextPath}/static/js/lib/bootstrap/js/bootstrap-menu.js"></script>
<script src="${pageContext.request.contextPath}/static/js/data/user.js"></script>
<script src="${pageContext.request.contextPath}/static/js/menu.js"></script>
<script type="text/javascript">
var table = null;
$(function () {
	
    $('#remoteTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'loginName'},
			{display : '姓名', name: 'userName'},
			{display : '电话', name: 'userPhone'},
			{display : '移动电话', name: 'userMPhome'},
			{display : '电子邮箱', name: 'userEmail'},
		],
		url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',		
		usePager: true
	});
     
    $('#remotePageTable').BootstrapTable({
		columns: [
			{display : '登录名', name: 'LOGIN_NAME'},
			{display : '姓名', name: 'USER_NAME'},
			{display : '电话', name: 'USER_PHONE'},
			{display : '移动电话', name: 'USER_M_PHOME'},
			{display : '电子邮箱', name: 'USER_EMAIL'},
		],
		url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserListByPageQuery',
		usePager: true,
		rownum: true,
		actions: [				    
				    {
				    	text: '新增',
				    	position: 'top',
				    	type: 'button',
				    	icon: 'add&white',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    	    alert(1);
				    	}
				    },
				    {
				    	text: '获取数据',
				    	position: 'top',
				    	type: 'button',
				    	icon: 'edit&white',
				    	cls: 'btn-sm btn-success',
				    	execute: function(){
				    		var data = $('#remotePageTable').BootstrapTable('getData');
				    		alert(JSON.stringify(data));
				    	}
				    },				    
				    {
				    	text: '修改',
				    	position: 'right',
				    	execute: function(data,row){
				    		alert(JSON.stringify(data));
				    	}
				    },
				],		
	});
}); 	

function search(){
	var condition = {userName: $("#userName").val(),loginName: $("#loginName").val()};
	$('#remotePageTable').BootstrapTable('setParm',{condition: JSON.stringify(condition)}).BootstrapTable('refresh');
}

</script>
</head>

<body>
	               
	<div class="container">
	    <nav id="menu"></nav> 	
		<div class="panel panel-default">
	        <div class="panel-heading">远程加载表格</div>
			<div class="panel-body">
			    <div id="remoteTable">
			    </div>		        
		     </div>
		     <div class="panel-footer">
		                           远程加载表格简略说明：                                                                                                                                                                                                                                                                     </br>
			    $('#remoteTable').BootstrapTable({                                                       </br>
					columns: [                                                                           </br>
						{display : '登录名', name: 'loginName'},                                           </br>
						{display : '姓名', name: 'userName'},                                              </br>
						{display : '电话', name: 'userPhone'},                                              </br>
						{display : '移动电话', name: 'userMPhome'},                                         </br>
						{display : '电子邮箱', name: 'userEmail'},                                            </br>
					],                                                                                     </br>
					url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserList',     </br>
					usePager: true                                                                         </br>
				});	                                                                                       </br>
				与简单表格不同的是，远程加载表格不再使用data属性加载表格数据，而是使用url属性远程异步加载数据	                           </br>
				异步加载数据有两种数据形式，一种是list形式(即本例所使用的形式)，数据一次加载进表格，表格总行数即为list的长度                                                                 </br>
				另一种为PageResult形式(即下一个例子的分页形式)，只加载当前页的数据，表格总行数为PageResult的totalRecords             </br>
				注：如果同时存在data和url属性，以url属性为准                                                                                                                                                                                                                   </br>
		     </div>
	    </div>
	      
		<div class="panel panel-default">
	        <div class="panel-heading">远程分页加载表格</div>
			<div class="panel-body">
		        <div style="float:right;margin:5px"><button class="btn btn-primary btn-sm btn-search" type="button" onclick="search()">查询</button></div>
		        <div style="float:right;margin:5px" class="col-md-2"><input type="text" id="userName" class="form-control input-sm" placeholder="姓名"></div>
		        <div style="float:right;margin:5px" class="col-md-2"><input type="text" id="loginName" class="form-control input-sm" placeholder="登录名"></div>		        		
		        <div id="remotePageTable"></div>
		     </div>
		     <div class="panel-footer">
		                            远程分页加载表格简略说明：                                                                                                                                                                                                                                                                                                               </br>
			    $('#remotePageTable').BootstrapTable({                                                                 </br>
					columns: [                                                                                         </br>
						{display : '登录名', name: 'LOGIN_NAME'},                                                        </br>
						{display : '姓名', name: 'USER_NAME'},                                                           </br>
						{display : '电话', name: 'USER_PHONE'},                                                          </br>
						{display : '移动电话', name: 'USER_M_PHOME'},                                                      </br>
						{display : '电子邮箱', name: 'USER_EMAIL'},                                                        </br>
					],                                                                                                  </br>
					url: '${pageContext.request.contextPath}/TtApplicationUserController/getUserListByPageQuery',        </br>
					usePager: true	                                                                                      </br>	
				});	                                                                                                      </br>
				远程分页加载表格与远程加载表格在前端的写法一致，主要是后端回传数据不同                                                                                                                                                                                                                   </br>
				远程分页加载表格的回传数据为PageResult，因此只加载当前页，此外远程分页加载表格的usePager属性必须为true	                             </br>                         
		     </div>
	    </div>
	             
	</div>
</body>

</html>